<template>
	<div class="step2">
		<a href="javascript:;" class='btn_new' @click='create'>创建房间</a>
		<a href="javascript:;" class="btn_join" @click='join'>加入房间</a>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				name:this.$store.state.name,
				room:''
			}
		},
		methods: {
			create(){
				let that=this;
				socket.emit('join', {
					name: that.name,
					roomID: 'room'+that.room,
					creat: true
				});
			},
			join(){
				this.$router.push('/selroom');
			}
		},
		created(){
			var that=this;
			$.ajax({
				type:"get",
				url:main+"/getroom",
				success:function(dt){
					that.room=dt.data;
				}
			});
		},
		mounted(){
			let that=this;
			socket.on('msg', function(msg) {
				if(msg.flag) {
					var lid = layer.alert('创建成功,房间号:' + that.room, function() {
						layer.close(lid);
						$.get(main+'/saveroom');
						that.$store.commit('change',{key:'isLeader',value:true});
						that.$router.push({path:'/main',query:{roomid:that.room}});
					});
				} else {
					layer.alert(msg.msg);
				}
				that.$store.commit('change',{key:'room',value:that.room});
			})
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang='scss'>
	@import '../assets/scss/reset';
	.step2 {
		margin: 480px/$ppr auto;
		width: 80%;
		height: 300px/$ppr;
		border: 2px solid #a98cf3;
		border-radius: 20px/$ppr;
		background: rgba(59, 15, 109, 0.41);
		box-shadow: 0px 0px 20px 5px #180744;
		text-align: center;
		a {
			display: block;
			width: 80%;
			height: 100px/$ppr;
			text-align: center;
			line-height: 100px/$ppr;
			border: 1px solid #d281ba;
			font-size: 32px/$ppr;
			border-radius: 50px/$ppr;
			margin: 35px/$ppr auto;
			background: linear-gradient(to bottom, #ce9ffc, #7367f0);
			color: #fff;
		}
	}
</style>